<template>
  <div>
    <div class="head">
      <span class="iconfont iconfont-img" style="color:red">&#xe757;</span>
      <span class="title">猜你喜欢</span>
    </div>

    <ul>
      <li class="cell" v-for="(item,index) of lists" :key="index">
        <div class="cell-item">
          <div class="leftImg">
            <img class="img" :src="item.imgUrl" />
          </div>

          <div class="infoView border-bottom">
            <p class="title">{{item.title}}</p>
            <p class="start">
              <el-rate v-model="item.rota" disabled text-color="#ff9900" score-template="{value}"></el-rate>
              <span class="roteDes">{{item.rotaDes}}</span>
            </p>
            <div class="money">
              <span class="sp1">
                ¥
                <span>
                  {{item.money}}
                  <span>起</span>
                </span>
              </span>
              <span class="sp2">{{item.location}}</span>
            </div>
            <div class="bottomText">{{item.topDes}}</div>
          </div>
        </div>
      </li>
    </ul>

    <div class="foot"></div>
  </div>
</template>

<script>
export default {
  props: {
    lists: {
      type: Array,
      default: () => [
        {
          imgUrl:
            "https://imgs.qunarzz.com/sight/p0/1607/7c/7cda8b6782dabd80b4.img.jpg_200x200_2039e660.jpg", // 图片地址
          title: "上海迪士尼乐园", //标题
          rota: 3.9, // 评分
          money: "189", //费用
          rotaDes: "12312312评论", //评分人数
          location: "浦东新区", //位置信息
          topDes: "全球最大城堡啪啪啪" //热点描述
        }
      ]
    }
  },
  name: "homeList",
  data() {
    return {};
  }
};
</script>

<style lang="stylus" scoped>
@import '~@styl';

// ---------------- head -----------------
.head >>> span {
  line-height: 0.3rem;
}

.head {
  margin: 0.1rem 2%;
  width: 96%;
  height: 0;
  padding-bottom: 0.3rem;
  background: #fff;

  .iconfont-img {
    vertical-align: middle;
    font-size: 0.16rem;
    height: 0.3rem;
    line-height: 0.3rem;
  }

  .title {
    margin-left: 0.02rem;
    font-size: 0.16rem;
    color: #212121;
    height: 0.3rem;
    line-height: 0.3rem;
    vertical-align: middle;
  }
}

// ---------------- body -----------------
.start >>> .el-rate__item {
  width: 0.16rem;
  height: 0.16rem;
  margin-left: 0;

  .el-rate__icon {
    font-size: 0.16rem;
  }
}

.cell {
  .cell-item {
    display: flex;
    margin: auto 2%;
    width: 96%;
    height: 0;
    overflow: left;
    padding-bottom: 44%;

    .leftImg {
      width: 29%;
      overflow: hidden;
      padding-bottom: 29%;
      border-radius: 0.15rem;

      .img {
        overflow: hidden;
        width: 100%;
        padding-bottom: 100%;
      }
    }

    .infoView {
      overflow: hidden;
      margin: 0.08rem 0.05rem 0;
      background: #fff;
      width: 69%;
      padding-bottom: 44%;
      position: relative;

      .title {
        font-size: 0.16rem;
        color: #212121;
        line-height: 0.22rem;
        height: 0.22rem;
        vertical-align: middle;
      }

      .start {
        display: flex;
        font-size: 0.14rem;
        color: #616161;
        margin-top: 0.1rem;

        .roteDes {
          margin-left: 0.1rem;
        }
      }

      .money {
        margin-top: 0.1rem;
        display: flex;
        justify-content: space-between;
        align-content: center;
        height: 0.25rem;

        .sp1 {
          font-size: 0.12rem;
          color: $text-oriang;

          span {
            margin-left: -0.04rem;
            font-size: 0.22rem;
            color: $text-oriang;

            span {
              margin-left: -0.04rem;
              font-size: 0.12rem;
              color: $text-dark;
            }
          }
        }

        .sp2 {
          font-size: 0.12rem;
          color: $text-dark;
          line-height: 0.25rem;
          height: 0.25rem;
          vertical-align: middle;
        }
      }

      .bottomText {
        font-size: 0.12rem;
        color: $text-red;
        position: absolute;
        bottom: 0.1rem;
      }
    }
  }

  // ---------------- foot -----------------
  .foot {
  }
}
</style>